<template>
  <div class="projectList">
    <van-search 
        @search="getDataInfo" 
        v-model="searchvalue" 
        shape="round" 
        background="#1989fa" 
        placeholder="请输入搜索关键词" />
    <div v-for="item in list" :key='item.fid' class='productCard'>
        <van-panel :title="item.fname"  :status="item.fstatename">
            <div class="listConent">
                <div class="listLi">类别名称：{{item.fclassidname}}</div>
                <div class="listLi">助记码：{{item.fhelpcode}}</div>
            </div>
            <template #footer>
                <van-button size="small" type="primary" @click="selected(item)">选择</van-button>
            </template>
        </van-panel>
    </div>


    <div class="standardInfoBtn" @click="openPick">选择类别</div>
    <van-popup v-model="showInputMode" get-container="body" position="bottom">
      <el-tree
        ref="categoryTree"
        :filter-node-method="filterNode"
        :default-expand-all="true"
        id="unSchTree"
        node-key="id"
        :data="items"
        :props="defaultProps"
        :check-on-click-node="true"
        :check-strictly="true"
        @check-change="handleCheckChange"
      ></el-tree>
    </van-popup>
  </div>
</template>

<script>
import { base_checkitem_search } from "@/api/calculator";
import { base_checkitem_init } from "@/api/projectList";
import { Tree } from "element-ui";
import {
  Button,
  DropdownMenu,
  DropdownItem,
  Icon,
  TreeSelect,
  Search,
  Popup,
  Panel
} from "vant";
export default {
    name: "standardInfo",
    components: {
        [Panel.name]: Panel,
        [Popup.name]: Popup,
        [Icon.name]: Icon,
        [Button.name]: Button,
        [DropdownMenu.name]: DropdownMenu,
        [DropdownItem.name]: DropdownItem,
        [TreeSelect.name]: TreeSelect,
        [Search.name]: Search,
        [Tree.name]: Tree
    },

    data() {
        return {
            selectedTree:{},
            showInputMode: false,
            defaultProps: {
                children: "children",
                label: "label"
            },
            searchvalue: "",
            activeIds: [],
            activeIndex: 0,
            items: [],
            names: [],
            list:[],
            type:'',
            propsfid1:''
        };
    },
    created() {
        this.type = this.$route.query.type;
        this.propsfid1 = this.$route.query.propsfid1;
        this.init()
    },
    methods: {
        selected(item){
            this.$router.push({
                path: "/addSecStandard",
                query: { 
                    fname: item.fname,
                    fid: item.fid ,
                    type:this.type,
                    propsfid1:this.propsfid1
                }
            });
        },
        getDataInfo(){
            this.init()
        },
        init(){
            base_checkitem_search({
                fmoduleid: "base_checkitemv2",
                searchvalue: this.searchvalue,
                pagesize: 20,
                pagenumber: 1,
                fuserid: "3fd6ff5c-dc5f-493a-9239-570c83f569f6"
            }).then(res => {
                this.list = res.rows;
                console.log(this.list);
            });
        },
        openPick() {
            base_checkitem_init({
                fuserid: "3fd6ff5c-dc5f-493a-9239-570c83f569f6",
                fmoduleid: "base_checkitemv2"
            }).then(res => {
                if (res.isSuccess) {
                    this.items = res.classrows;
                    this.showInputMode = true;
                    if (this.items[0].children.length > 0) {
                    this.$nextTick(() => {
                        this.$refs.categoryTree.setCurrentKey(this.items[0].children[0].id)
                        this.selectedTree = this.items[0].children[0]
                        console.log(this.selectedTree)
                    })
                    }
                }
            });
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },

        handleCheckChange(data, checked, indeterminate) {
            console.log(data);
            this.showInputMode = false;
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.projectList .van-cell__title{
    text-align: left;
}
.projectList .van-panel__footer{
    text-align: right;
}
.van-sidebar-item--select {
  border-color: #39a9ed;
}
.van-tree-select__item--active {
  color: #39a9ed;
}
.standardInfoBtn {
  line-height: 40px;
  width: 100%;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #1989fa;
  color: white;
}
.listConent {
  display: flex;
  width: 90%;
  margin: 0 auto;
}
.listLi {
  width: 50%;
  text-align: center;
  line-height: 40px;
  font-size:14px;
}
.productCard{
    width: 94%;
    margin: 0 auto;
    margin-top: 16px;
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
